<template>
  <div id="">
    <div id="">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
        <el-breadcrumb-item>成绩明细</el-breadcrumb-item>
      </el-breadcrumb>
      <br />
    </div>

    <template>
      <!-- 多条件查询 -->
      <el-row>
        <el-col :span="14">
          <template>
            <el-form
              :inline="true"
              :model="scoreManagementPage"
              class="demo-form-inline"
            >
              <el-form-item label="姓名">
                <el-input
                  v-model="scoreManagementPage.studentName"
                  placeholder="请输入名字"
                  style="width: 140px"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="试卷名">
                <el-input
                  v-model="scoreManagementPage.examTitle"
                  placeholder="请输入试卷名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="分数">
                <el-input
                  v-model="scoreManagementPage.score"
                  placeholder="请输入分数"
                  style="width: 140px"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="loadData">查询</el-button>
              </el-form-item>
              <br />
              <el-form-item label="试卷">
                <el-select
                  v-model="scoreManagement.examTitle"
                  placeholder="请选择要查询的试卷"
                >
                  <el-option
                    v-for="item in options"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getAvg">平均分？</el-button>
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="avgScore"
                  placeholder="平均分为？"
                  :disabled="true"
                  style="width: 140px"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="showMoTai">及格率?</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-col>
      </el-row>

      <el-table
        :data="scoreManagementList"
        style="width: 100%"
        :default-sort="{ prop: 'data', order: ['score', 'examTitle'] }"
      >
        <el-table-column prop="scoreManagementId" label="编号" width="180">
          <template slot-scope="x">
            <span style="margin-left: 10px">{{ x.row.scoreManagementId }}</span>
          </template>
        </el-table-column>

        <el-table-column label="姓名" width="180">
          <template slot-scope="x">
            <span style="margin-left: 10px">{{ x.row.studentName }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="score" label="分数" width="80" sortable>
          <template slot-scope="x">
            <span
              v-if="
                (x.$index == 0 || x.$index == 1 || x.$index == 2) &&
                scoreManagementPage.page == 1
              "
              style="color: red"
              >{{ x.row.score }}</span
            >
            <span v-else="true">{{ x.row.score }}</span>
          </template>
        </el-table-column>

        <el-table-column label="科目" width="180">
          <template slot-scope="x">
            <span style="margin-left: 10px">{{ x.row.subjectName }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="examTitle" label="试卷名" width="180" sortable>
          <template slot-scope="x">
            <span style="margin-left: 10px">{{ x.row.examTitle }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="scoreManagementPage.page"
          :page-sizes="[2, 3, 5]"
          :page-size="scoreManagementPage.row"
          layout="total,sizes,prev,pager,next,jumper"
          :total="scoreManagementPage.total"
        >
        </el-pagination>
      </div>
    </template>
    <el-dialog
      title="及格率"
      :visible="dialogTableVisible"
      :before-close="closeWin"
      width="40%"
      @opened="getPassRate()"
    >
      <div id="main" style="width: 600px; height: 400px"></div>
    </el-dialog>
  </div>
</template>


<style>
</style>

<script>
// 导入 echartsUtil
import echartsUtil from "../util/echartsUtil.js";
// import * as echarts from 'echarts';

export default {
  data() {
    return {
      avgScore: "",
      options: [],
      tableData: [
        {
          scoreManagementId: "1",
          studentName: "小明",
          score: "89",
          subject: "英语",
        },
        {
          scoreManagementId: "2",
          studentName: "小张",
          score: "45",
          subject: "英语",
        },
        {
          scoreManagementId: "3",
          studentName: "小王",
          score: "94",
          subject: "英语",
        },
        {
          scoreManagementId: "4",
          studentName: "小李",
          score: "63",
          subject: "英语",
        },
      ],
      scoreManagementList: [],
      dialogTableVisible: false, //模态框
      scoreManagementPage: {
        page: 1,
        row: 5,
        total: 0,
        studentId: null,
        // 多条件查询所需字段
        studentName: "",
        examTitle: "",
        score: "",
      },
      scoreManagement: {
        scoreManagementId: 0,
        studentId: 0,
        studentName: "",
        score: 0,
        subjectId: 0,
        subjectName: "",
        examTitle: "",
      },
    };
  },

  methods: {
    //加载函数
    loadData() {
      var self = this;
      let studentId = localStorage.getItem("studentId");
      // 是不是考生身份
      if (studentId != 'null') {
        self.scoreManagementPage.studentId = studentId;
        // console.log("考生编号==" + self.scoreManagementPage.studentId);
      }
      $.ajax({
        url: "http://localhost:8080/scoreManagement/scoreManagementList",
        type: "get",
        data: self.scoreManagementPage,
        dataType: "json",
        success: function (rs) {
          self.scoreManagementList = rs.list;
          self.options = rs.optionList;
          self.scoreManagementPage.total = rs.total;
          // console.log("成功");
        },
        error: function (rs) {
          // console.log("失败");
        },
      });
    },
    handleSizeChange(val) {
      // console.log(val);
      this.scoreManagementPage.row = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      // console.log(val);
      this.scoreManagementPage.page = val;
      this.loadData();
    },
    handSelectionChange(val) {
      // console.log(val);
      this.scoreManagementList = val;
      this.loadData();
    },
    closeWin() {
      this.dialogTableVisible = false;
    },
    //求平均分
    getAvg() {
      var self = this;
      console.log(this.scoreManagement.examTitle),
        $.ajax({
          url: "http://localhost:8080/scoreManagement/getAvg",
          type: "get",
          data: self.scoreManagement,
          dataType: "json",
          success: function (rs) {
            self.avgScore = rs.avgScore;
          },
        });
    },

    //显示模态框
    showMoTai() {
      this.dialogTableVisible = true;
    },
    getPassRate() {
      var self = this;
      $.ajax({
        url: "http://localhost:8080/scoreManagement/getPassRate",
        type: "get",
        dataType: "json",
        success: function (rs) {
          // self.dialogTableVisible = true;
          echartsUtil.passRate(rs);
        },
        error: function (rs) {
          // console.log("求及格率失败");
        },
      });
    },
  },
  mounted() {
    this.loadData();
  },
};
</script>
